<template>
    <div>
        <!--属性要用冒号-->
        <input type="button" :value="'点击次数'+count" @click="count++"/>
        <input type="text" v-model="msg"/>
        <br/>
        <input type="button" value="显示/因此有隐藏" @click="flag=!flag"/>
        <!-- 多个会有影响    -->
        <!--        <h3 v-show="flag">{{msg}}</h3>-->
        <transition :duration="{ enter: 500, leave: 800 }">
            <h3 v-show="flag">{{msg}}</h3>
        </transition>
        <transition name="my">
            <!--            必须带v,如果不想带v 给transition加上name属性区别不同组织的动画-->
            <h3 v-show="flag">{{msg}}</h3>
        </transition>
        if else
        <br/>
        <button v-if="flag">这是if</button>
        <button v-else>这是else</button>
        <br/>
        <span :title="msg">
            测试鼠标停留悬浮
        </span><br/>
        <input type="text" v-model="item" ref="input1"/> <input type="button" value="添加" @click="add">
        <input type="button" class="left" value="包含" @click="contain"/>
        <ol>
            <transition-group appear tag="div">
                <li v-for="(todo,index) in todos" @click="del(index)">索引{{index}}-{{ todo.text }}
                    <input type="button" class="left" value="删除" @click="del(index)"/>
                </li>
            </transition-group>
        </ol>
        <router-link to="/demo/one">one</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    // 在组件中使用vue需要export default
    export default {
        data() {
            return {
                msg: '测试', flag: false, todos: [
                    {text: '学习 JavaScript'},
                    {text: '学习 Vue'},
                    {text: '整个牛项目'}
                ], item: '', count: 0/**
                 *跳转过来的参数
                 */
                , param: null
            }
        },
        methods: {
            add() {
                // $refs有效减少获取dom节点的性能消耗，这样也能获取
                console.log(this.$refs.input1.value);
                this.todos.push({text: this.item});
            },
            del(index) {
                this.todos.splice(index, 1);
            }, contain() {
                if (this.todos.some(obj => {
                    return obj.text === this.item;
                })) {
                    this.msg = '包含';
                } else {
                    this.msg = '不包含';
                }
            }
        }
    }
</script>
<style scoped>
    .v-enter, .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }

    .v-enter-active, .v-leave-active {
        transition: all 1.8s ease;
    }

    .my-enter, .my-leave-to {
        opacity: 0;
        transform: translateX(70px);
    }

    .my-enter-active, .my-leave-active {
        transition: all 0.8s ease;
    }

    li {
        border: 1px dashed black;
        margin: 5px;
        line-height: 35px;
    }

    li:hover {
        background: darkorange;
    }

    .left {
        margin-left: 15px
    }

    .v-move {
        transition: all 0.6s ease;
    }

    .v-leave-active {
        position: absolute;
    }
</style>
<!--
浅出浅出的效果，利用vue的动画效果。过渡类名
1.用transition包裹需要动画效果的标签。 #只能用一个v-if或v-show标签，多个会有问题
2.定义进出，出去的样式
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(150px);
}

.v-enter-active, .v-leave-active {
transition: all 1.8s ease;
}
-->
